<template>
    <div>
        <div>
            <slot name="title">
                <a-button
                    :color="color"
                    :disabled="disabled"
                    :size="size"
                    :sharp="sharp"
                    @click="$emit('update:value', !value)"
                >
                    <span>{{ title }}</span>
                    <span>
                        <span
                            class="fa fa-fw fa-angle-right"
                            v-if="!value"
                        ></span>
                        <span class="fa fa-fw fa-angle-down" v-else></span>
                    </span>
                </a-button>
            </slot>
        </div>
        <div v-show="value">
            <slot></slot>
        </div>
    </div>
</template>

<script>
import AButton from './AButton.vue'
import AControlGroup from './AControlGroup.vue'
import ALabel from './ALabel.vue'
export default {
    components: { AButton, ALabel, AControlGroup },
    emits: ['update:value'],
    props: {
        color: {
            type: String,
            default: 'default',
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        size: {
            type: String,
            default: 'm',
        },
        sharp: {
            type: Boolean,
            default: false,
        },
        title: {
            type: String,
        },
        value: {
            type: Boolean,
            default: false
        }
    },
}
</script>